<template>
  <div class="container">
    <div class="banner">
      <img :src="url" alt="banner"/>
    </div>
    <div id="body">
      <transition-group>
        <div class="list" v-for="list in tableData" :key="list">
<!--          <div class="activityContent">-->
<!--            <div v-if="isPackUp">-->
<!--              <h2>-->
<!--                <a :href="list.url" target="_blank">{{ list.name }}</a>-->
<!--              </h2>-->
<!--              <div class="content">-->
<!--                <div class="inner">-->
<!--                  <span>{{ list.intro }}</span>-->
<!--                  <div style="margin: 20px">-->
<!--                    <button @click="packDown">了解详情-->
<!--                      <i class="el-icon-arrow-down"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="actions">-->
<!--                        <span>-->
<!--                            开始时间：{{ list.start_time }}-->
<!--                        </span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div v-else>-->
<!--              <h2>-->
<!--                <a :href="list.url" target="_blank">{{ list.name }}</a>-->
<!--              </h2>-->
<!--              <div class="content">-->
<!--                <div class="inner">-->
<!--                  <span>{{ list.intro }}</span>-->
<!--                  <span>{{ list.details }}</span>-->
<!--                  <span>联系方式：{{ list.wechat }}</span>-->


<!--                  <div style="margin: 20px">-->
<!--                    <button @click="packUp">收起-->
<!--                      <i class="el-icon-arrow-up"></i>-->
<!--                    </button>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div class="actions">-->
<!--                        <span>-->
<!--                            开始时间：{{ list.start_time }}-->
<!--                        </span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import {getActivityLists} from "@/api/activity";
import {getClublist} from "@/api/club";

export default {
  name: "activity",
  data() {
    return {
      isPackUp: true,
      // activeNames: ['1'],
      url: require("@/assets/1.jpg"),
      // currentDate: new Date(),
      clubList: [],
      tableData: [],
      lists: []
    };
  },
  created() {
    this.initData();

  },
  components: {},
  methods: {
    //展开/收起
    packUp(){
      this.isPackUp = true;
    },
    packDown(){
      this.isPackUp = false;
      // this.getSimpleAuthorMessage();
    },
    //加载数据实例
    load() {
      this.$axios({
        methods: 'get',
        url: 'data/indexmain.json'
      })
        .then(res => {
          this.lists = res.data.data
        })
        .catch(err => {
          console.log(err);
        })
    },
    //初始化数据
    async initData() {
      await this.getActivityList();
    },

    //获取活动列表数据
    async getActivityList() {
      const activitys = await getActivityLists();
      this.tableData = [];
      console.log(activitys);
      activitys.forEach(item => {
        const tableData = {};
        tableData.name = item.name;
        tableData.number = item.number;
        tableData.intro = item.intro;
        tableData.address = item.address;
        tableData.describe = item.describe;
        tableData.id = item.id;
        tableData.wechat = item.wechat;
        tableData.state = (item.state == 0) ? "审核中" : ((item.state == 1) ? "已通过" : ((item.state == -2) ? "已取消" : "未通过"));
        tableData.object = item.object;
        tableData.start_time = item.startTime;
        tableData.details = item.details;
        tableData.submission_time = item.submissionTime;
        tableData.max_person = item.maxPerson;
        this.tableData.push(tableData);
      })

    },
  }
}
</script>

<style scoped>
@import "../../../style/common.scss";
@import "../../../style/index/index-main.scss";

#body {
  padding-bottom: 50px;
}

/*@include animate();*/
/*card*/
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

/*img*/
.banner {
  height: 250px;
  width: 100%;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*.title {*/
/*  float: top;*/
/*  position: absolute;*/
/*  margin-bottom: 200px;*/
/*}*/

el-row {
  margin: auto;
  width: 50%;
  /*border: 3px solid green;*/
  padding: 20px;
}
</style>
